<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<title>Custom Puzzle - WorldSkills 2015</title>
</head>
<body>

	<!-- START -->
	<div id="start">
		<div class="box">
			<h2>Welcome do Custom Puzzle!</h2>
			<p>This game consists in you make your puzzle game</p>
			<form action="#" method="post">
				<div class="group">
					<label for="name">Name</label>
					<input type="text" name="name" id="name" />
				</div>
				<div class="group">
					<label for="difficult">Difficult</label>
					<select type="text" name="difficult" id="difficult" >
						<option value="1">EASY</option>
						<option value="2">MEDIUM</option>
						<option value="3">HARD</option>
					</select>
				</div>
				<!-- DROP -->
				<div class="group boxs" id="drop">
					<div class="preview">
					</div>
					<p>Drop your photo here!</p>
				</div><!-- END DROP -->
				<div class="group">
					<button type="button" name="submit" class="startBtn">START</button>
				</div>
			</form>
		</div>
	</div><!-- END START -->

	<!-- END -->
	<div id="end">
		<div class="box">
			<h3>Congratulations! You have solved the puzzle!</h3>
			<p>You did it!</p>
			<table>
				<thead>
					<tr>
						<th>POSITION</th>
						<th>LEVEL</th>
						<th>NAME</th>
						<th>TIME</th>
					</tr>
				</thead>
				<tbody class="tbody">
					<tr>
						<td>1</td>
						<td>EASY</td>
						<td>JOHN DOE</td>
						<td>1:00</td>
					</tr>
					<tr>
						<td>2</td>
						<td>EASY</td>
						<td>JOHN DOE</td>
						<td>1:20</td>
					</tr>
					<tr>
						<td>3</td>
						<td>EASY</td>
						<td>JOHN DOE</td>
						<td>1:40</td>
					</tr>
					<tr class='you'>
						<td>24</td>
						<td>EASY</td>
						<td>JOHN DOE</td>
						<td>9:40</td>
					</tr>
				</tbody>
			</table>
			<button class="btn btn-restart restartRankBtn">RESTART APPLICATION</button>
		</div>
	</div><!-- END END -->

	<!-- GAMECONTAINER -->
	<div id="gameContainer">
		<div class="container">
			

			<!-- PLAYERNAME -->
			<span id="playername">John Doe</span>
			<!-- TIMER -->
			<div id="timer">
				<span></span>
			</div>

			<div id="puzzleContainer">
				<!-- PUZZLE -->
				<div id="puzzle">

				</div>
				
				<div id="puzzleDestination">

				</div>
			</div>

			<div class="buttons">
				<button class="btn btn-pause pauseBtn">PAUSE</button>
				<button class="btn btn-restart restartBtn">RESTART</button>
			</div>
		</div>
	</div><!-- END GAMECONTAINER -->

	<!-- SCRIPTS -->
	<script type="text/javascript" src='js/script.js'></script>
</body>
</html>